<template>
  <div>
    <!--连接-->
    <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/read" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/register" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      贾豆读书
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" v-model="input" placeholder="书名、作者、ISBN" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" @click="findName(input)"
                                 style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--电影连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="movie_link">
                      <el-link href="#/" :underline="false" class="m_link">购书单</el-link>
                      <el-link href="#/" :underline="false" class="m_link">电子图书</el-link>
                      <el-link href="#/" :underline="false" class="m_link">豆瓣书店</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">2019书影音报告</el-link>
                      <el-link :underline="false" class="m_link">购物车</el-link>

                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div class="image">
      <el-image style="height:100px" src="http://qargel3iz.bkt.clouddn.com/12.jpg"/><!---->
    </div>

    <!--main-->
    <el-row style="margin-bottom: 20px">
      <el-col :span="24">
        <div class="main_1">
          <!--热门链接-->
          <el-row>
            <el-col :span="24">
              <div class="main_2">
                <el-col :span="3" :offset="2">
                  <div class="main_3">
                    新书速递
                  </div>
                </el-col>

                <el-col :span="1">
                  <div class="main_5">
                    <el-link :underline="false" class="j_link el-icon-d-arrow-right">更多</el-link>
                  </div>
                  <div>

                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="product">
                <el-col :span="13" :offset="2">
                  <div class="product_1">
                    <el-row class="content" :gutter="45">
                      <el-col :span="6" v-for="item in books">
                        <div class="content1">
                          <el-link @click="findOne(item.bid)" :underline="false" style="color: #37a">
                            <el-image style="height:150px" :src="item.rsrc"/>
                          </el-link>
                        </div>
                        <div class="content2">
                          <el-link @click="findOne(item.bid)" :underline="false" style="color: #37a">{{item.bname}}&nbsp;<span
                            style="color: #e09015"></span></el-link>
                          <el-link :underline="false" style="color: #37a"><span
                            style="color: #e09015"></span></el-link>
                        </div>
                      </el-col>

                    </el-row>
                    <el-row>
                      <el-col :span="24" class="page">
                        <div class="block">
                          <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="params.pageSie"
                            :current-page="params.pageNum"
                            v-on:current-change="currentChange">
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="product_2">
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            热门标签&nbsp;&nbsp;
                          </div>
                          <div style="float: left">
                            <el-link :underline="false" class="koubeilink el-icon-d-arrow-right">所有热门标签</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">文学 小说 随笔 散文 诗歌</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">流行 漫画 推理 绘本 青春 科幻</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">文化 历史 哲学 传记 设计 建筑</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">生活 旅行 励志 教育 职场 美食 家居</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">经管 管理 经济学 商业 金融 营销</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">科技 科普 互联网 编程 交互设计 算法 通信</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>

                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div class="image">
      <el-image style="height:100px" src="http://qargel3iz.bkt.clouddn.com/13.jpg"/><!---->
    </div>
    <el-row>
      <el-col :span="24">
        <div class="main_1">
          <!--热门链接-->
          <el-row>
            <el-col :span="24">
              <div class="main_2">
                <el-col :span="3" :offset="2">

                </el-col>
                <el-col :span="9">

                </el-col>
                <el-col :span="1">
                  <div class="main_5">

                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="product">
                <el-col :span="13" :offset="2">

                  <el-image style="height:200px" src="http://qargel3iz.bkt.clouddn.com/14.jpg"></el-image>

                </el-col>
                <el-col :span="9">
                  <div class="product_2">
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            畅销图书榜
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">1. 和爸妈游世界 ——黄宇</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>

                    <el-col :span="22">
                      <div class="koubei">
                        <div class="cli">
                          <el-link :underline="false" class="koubeilink">2. 你当像鸟飞往你的山 ——[美]塔拉·韦斯特弗</el-link>
                        </div>
                      </div>
                    </el-col>


                    <el-col :span="22">
                      <div class="koubei">
                        <div class="cli">
                          <el-link :underline="false" class="koubeilink">3. 人生海海 -麦家</el-link>
                        </div>
                      </div>
                    </el-col>


                    <el-col :span="22">
                      <div class="koubei">
                        <div class="cli">
                          <el-link :underline="false" class="koubeilink">4. 和爸妈游中国</el-link>
                        </div>
                      </div>
                    </el-col>

                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            合作联系
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div>
                          <p style="font-size: 14px">&nbsp;&nbsp;&nbsp;图书合作邮箱：reading@jiadou.com</p>
                          <p style="font-size: 14px">报刊合作邮箱：newspaper@jiadou.com</p>
                          <p style="font-size: 14px">PRO合作邮箱：pro@jiadou.com</p>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    name: "reading",
    data() {
      return {
        input: "",
        url: "https://img9.doubanio.comy/view/subject/l/public/s33547055.jpg",
        uri: "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2603439726.jpg",

        books: [
          // {rsrc:'',bname:''}
        ],
        visible: false,
        params: {
          pageSie: 8,
          pageNum: 1,
        },
        total: "",
      }
    },
    methods: {

      findAll: function () {
        var _this = this;
        //查询全部显示
        axios.get('/bean/read/findAll/' + _this.params.pageSie + "/" + _this.params.pageNum).then(function (res) {
          _this.books = res.data.readList;
          //alert(res.data.readList[0].bid);
          _this.total = res.data.total;

        })

      },
      findOne: function (id) {
        this.$router.push('/xiangqing/' + id);
      },
      findName: function (name) {

        this.$router.push('/sousuo/' + name);
      },
      currentChange: function (page) {
        this.params.pageNum = page;

        this.findAll();
      }
    },
    mounted: function () {

      this.findAll();

    }
  }
</script>

<style scoped>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: saddlebrown;
  }

  .header_1 {
    height: 140px;
    background-color: cornsilk;
    /*border: 1px solid darkgreen;*/
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: saddlebrown;
    line-height: 90px;
    /*border: 1px solid darkblue;*/
  }

  .movie_link {
    /*border: 1px solid darkgoldenrod;*/
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .main_1 {
    /*border: 1px solid darkgray;*/
    height: 500px;
  }

  .main_2 {
    height: 40px;
    /*border: 1px solid darkgray;*/
  }

  .main_3 {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    width: 100%;
  }

  .main_5 {
    height: 40px;
    /*border: 1px solid darkgray;*/
    line-height: 40px;
    float: left;
    font-size: 14px;
    width: 100%;
    color: blue;
  }

  .j_link {
    height: 40px;
    line-height: 40px;
    color: #37a;
    float: left;
    font-size: 14px;
  }

  .product_1 {
    height: 450px;
    /*border: 1px solid skyblue;*/
    margin-left: 30px;
  }

  .product_2 {
    height: 450px;
    /*border: 1px solid greenyellow;*/
  }

  .content1 {
    /*border: 1px solid greenyellow;*/
    width: 100%;
    height: 150px;
  }

  .content2 {
    /*border: 1px solid greenyellow;*/
    padding: 8px;
  }

  .content {
    padding: 20px 0px 10px 0px;
  }

  .page {
    /*border: 1px solid darkgoldenrod;*/
    height: 40px;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    /*border: 1px solid skyblue;*/
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .koubei {
    height: 50px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 80px;
    border-bottom: 1px solid silver;
  }

  .koubeilink {
    line-height: 50px;
    color: #37a;
  }

  .cli {
    float: left;
    font-size: 14px;
    margin-left: 20px;
    color: #37a;
  }
</style>
